<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>图像识别APP管理系统</title>
	<link href="css/common.css" rel="stylesheet">
	<link rel="stylesheet" href="css/layui.css" media="all">
	<link rel="icon" href="image/favicon.ico" sizes="32x32">
	<link id="layuicss-layer" rel="stylesheet" href="css/modules/layer/default/layer.css" media="all">
	<link rel="stylesheet" href="css/xadmin.css">
	<script src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="js/layui.js" charset="utf-8"></script>

	<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
</head>
<script type="text/javascript">
	var full = 0;
	var roleName;
	var theme;
	var elem;
	//全屏
	function fullscreen() {
		elem = document.body;
		if (elem.webkitRequestFullScreen) {
			elem.webkitRequestFullScreen();
		} else if (elem.mozRequestFullScreen) {
			elem.mozRequestFullScreen();
		} else if (elem.requestFullScreen) {
			elem.requestFullscreen();
		} else {
			//浏览器不支持全屏API或已被禁用  
		}
		full = 1;
	}
	//退出全屏
	function exitFullscreen() {
		var elem = document;
		if (elem.webkitCancelFullScreen) {
			elem.webkitCancelFullScreen();
		} else if (elem.mozCancelFullScreen) {
			elem.mozCancelFullScreen();
		} else if (elem.cancelFullScreen) {
			elem.cancelFullScreen();
		} else if (elem.exitFullscreen) {
			elem.exitFullscreen();
		} else {
			//浏览器不支持全屏API或已被禁用  
		}
		full = 0;
	}
	$(function () {
		//主题
		theme = getCookie("theme");
		if (theme != "") {
			switch (theme) {
				case 'blue':
					$(".top").addClass("theme_Blue");
					$(".left").addClass("theme_Blue");
					break;
			}
		}

		user = getCookie("userName");
		name = getCookie("name");
		roleName = getCookie("roleName");
		if (user == "") {
			returnLogin();
			return;
		}
		console.log("名字："+name);
		$("#userName").text(name);

		$('.slideLeft').click(function (event) {
			if ($('.left').css('left') == '0px') {
				$('.left').animate({ left: '-200px' }, 100).siblings('.page-content').animate({ left: '0px' }, 100);
				$('.page-content-bg').hide();
			} else {
				$('.left').animate({ left: '0px' }, 100).siblings('.page-content').animate({ left: '200px' }, 100);
				if ($(window).width() < 768) {
					$('.page-content-bg').show();
				}
			}
		});
		$(".fullScreen").click(function () {
			$(".slideLeft").click();
			if (full == 0) {
				fullscreen();
			} else {
				exitFullscreen();
			}
		})
		$(".refreshPage").click(function () {
			var src = $(".layui-tab-item.layui-show").find("iframe").attr("src");
			$(".layui-tab-item.layui-show").find("iframe").attr("src", src);
			clickiFrame(src)
			// var src = $("#iframeMain").attr("src");
			// $("#iframeMain").attr("src", src);
		})
		//主题
		$(".theme").click(function () {
			if (!$(".top").hasClass("theme_Blue")) {
				$(".top").addClass("theme_Blue");
				$(".left").addClass("theme_Blue");
				setCookie("theme", "blue");
			} else {
				$(".top").removeClass("theme_Blue");
				$(".left").removeClass("theme_Blue");
				setCookie("theme", "");
			}

			$(".layui-nav").toggleClass("layui-bg-cyan")
			$(".layui-nav").toggleClass("layui-bg-blue")
		})
	})


</script>

<body>
	<div class="top">
		<h1>图像识别APP管理系统</h1>
		<span class="slideLeft" title="收起菜单"><i class="layui-icon layui-icon-shrink-right"></i></span>
		<span class="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></span>
		<span class="refreshPage" title="刷新当前页面"><i class="layui-icon layui-icon-refresh"></i></span>
		<span class="theme" title="切换主题"><i class="layui-icon layui-icon-theme"></i></span>
		<div class="topRight">
			<span class="loginInfo">欢迎您，<b id="userName"></b></span>
			<a class="topnav" onclick="oepnModifyPsw();">修改密码<span></span></a>
			<a class="topnav warn" onclick="openLoginOut();">退出登录<span></span></a>
		</div>
	</div>
	<div class="left" id="menu">

	</div>
	<div class="page-content">
		<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
			<ul class="layui-tab-title">
			</ul>
			<div class="box">
				<ul>
					<li onclick="handleCloseOther()">关闭其他</li>
					<li onclick="handleRefresh()">刷新</li>
				</ul>
			</div>
			<div class="layui-tab-content">
			</div>
		</div>
	</div>

</body>

</html>

<script type="text/javascript">
	//修改密码弹窗
	function oepnModifyPsw() {
		layui.use(["layer", "element"], function () {
			var layer = layui.layer;
			var element = layui.element;
			layer.open({
				type: 1,
				title: "修改密码",
				area: "350px",
				shade: 0.5,
				btn: ["确认", "取消"],
				btnAlign: "c",
				moveType: 1,
				content:
					'<div class="popupCont"><label  class="w70"><b class="mustLabel">*</b>新密码:</label><input type="password" id="newPsw" autocomplete="off"  style="width:140px"/>' +
					'</div>' +
					'<div class="popupCont"><label  class="w70"><b class="mustLabel">*</b>确认密码:</label><input type="password" id="confirmPsw" autocomplete="off"  style="width:140px"/>' +
					'</div>'
				, success: function () {
					ModifyPswPage = layer.index;
				}
				, yes: function () {
					confirmModyPsw();
				}
			});
		})
	}
	//修改密码请求
	function confirmModyPsw() {
		var newPsw = $("#newPsw").val();
		var confirmPsw = $("#confirmPsw").val();
		newPsw = $.trim(newPsw);
		confirmPsw = $.trim(confirmPsw);
		if (newPsw == "" || confirmPsw == "") {
			layer.msg("密码不能为空");
			return;
		}
		if (newPsw != confirmPsw) {
			layer.msg("两次密码不一致");
			return;
		}
		var data = {
			username: user,
			password: newPsw,
			confirmPassword: confirmPsw
		}
		ModifyPswLoad = layer.load(2, { shade: 0.1 })
		sendPostAjax(
			webUrl + "/userinfo/updatePassword",
			data,
			SetPswCallBack
		);
	}
	//修改密码请求回调
	function SetPswCallBack(data) {
		layer.close(ModifyPswLoad);
		/* console.log(data); */
		if (data == null) {
			return;
		}
		if (data.errCode == "000000") {
			layer.msg(data.errMsg);
		} else {
			layer.alert(data.errMsg);
			return;
		}
		layer.close(ModifyPswPage);
	}

	//登出弹窗
	function openLoginOut() {
		layui.use(["layer", "element"], function () {
			var layer = layui.layer;
			var element = layui.element;
			layer.confirm('是否确认退出', { title: '系统提示', btn: ['确认', '取消'] }, function (index) {
				//do something
				layer.close(index);
				returnLogin();
			});
		});
	}

	layui.use(['element', 'layer'], function () {
		var $ = layui.jquery
			, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

		// 绑定右击事件
		function handleRClick(obj) {
			obj.oncontextmenu = function (e) {
				e.preventDefault();
			}
			obj.onmouseup = function (e) {
				var width = parseInt($("#menu").css("left")) ? 0 : parseInt($("#menu").css("width"))
				$(".box").css({ display: "block", left: e.clientX - width })
				$(".box").attr("name", $(e.target).attr("lay-id") || $(e.target).parent('li').attr("lay-id"))
			}
		}

		// 作用是点击使得div.box隐藏，一个用于父页面一个用于子页面
		$('html').click(function () {
			hideBox()
		})
		window.clickiFrame = function (url) {
			var elem = url ? "iframe[src=\'" + url + "\']" : "iframe[src='html/levelInfo.html']"
			var timer = setInterval(() => {
				if ($(elem).contents().find("html")[0]) {
					clearInterval(timer)
					$(elem).contents().find("html").click(function () {
						hideBox()
					})
				}
			}, 20);
		}

		window.hideBox = function () {
			var isShow = $(".box").css("display")
			$(".box").css("display", isShow == "block" ? "none" : isShow)
		}

		function getAhtml(obj) {
			return "<a href=\"javascript:;\" data-url='" + obj.url + "'  data-id='" + obj.menuId + "'>" + obj.menuName + "</a>";
		}

			var theme = getCookie("theme") ? "layui-bg-blue" : "layui-bg-cyan"
			var html = '<ul class="layui-nav ' + theme + '" lay-filter="leftNav">';
			var menuData = [
				{	menuId:1,
					menuName:"识别内容管理",
					url:"/html/IdentificationContent.html",
					menuIndex:1,
					menuLevel:1
				},
				{	menuId:2,
					menuName:"识别分享管理",
					url:"/html/InvitationContent.html",
					menuIndex:2,
					menuLevel:1
				},
				{	menuId:3,
					menuName:"用户管理",
					url:"/html/user.html",
					menuIndex:3,
					menuLevel:1
				},
				// {	menuId:5,
				// 	menuName:"消息",
				// 	url:"/html/websocket.html",
				// 	menuIndex:5,
				// 	menuLevel:1
				// }
			];
			var contentTxt;
			var name;
			let id;
			for (var i = 0; i < menuData.length; i++) {
				var strli = "<li class=\"layui-nav-item lay-unselect \" >";
				if (menuData[i].url == '') {
					strli = strli + "<a href=\"javascript:;\">" + menuData[i].menuName + "</a>";
				} else {
					if (i == 0) {
						contentTxt = '<iframe src="' + menuData[0].url + '" style="width: 100%;" ; height="100%" ; frameborder="no" border="0"></iframe>';
						name = menuData[0].menuName;
						id = menuData[0]['menuId'];
					}
					strli = strli + getAhtml(menuData[i]);
				}
				strli = strli + "</li>";
				html = html + strli;
			}
			html += "</ul>"
			$("#menu").html(html)
			element.render();

			//新增一个Tab项
			layui.element.tabAdd('xbs_tab', {
				title: name,
				content: contentTxt,
				id: id
			})
			var len = $(".layui-tab-title li").length
			handleRClick($(".layui-tab-title li")[len - 1])
			layui.element.tabChange('xbs_tab', id)
			clickiFrame()



		element.on('nav(leftNav)', function (elem) {
			var id = elem.attr('data-id');
			var url = elem.attr('data-url');
			if (url) {
				var name = elem.text();
				if (layui.jquery(".layui-tab-title li[lay-id='" + id + "']").length > 0) {
					//选项卡已经存在
					layui.element.tabChange('xbs_tab', id);
				} else {
					contentTxt = '<iframe src="' + url + '" style="width: 100%;" ; height="100%" ; frameborder="no" border="0"></iframe>';
					//新增一个Tab项
					layui.element.tabAdd('xbs_tab', {
						title: name,
						content: contentTxt,
						id: id
					})
					var len = $(".layui-tab-title li").length
					handleRClick($(".layui-tab-title li")[len - 1])
					//切换刷新
					layui.element.tabChange('xbs_tab', id)
					clickiFrame(url);
				}
			}
		})

		element.on('tab(xbs_tab)', function (elem) {
			var id = $(this).attr("lay-id")
			$(".layui-nav a").each(function () {
				if (id == $(this).attr('data-id')) {
					$(this).parent().addClass("layui-this")
				} else {
					$(this).parent().removeClass("layui-this")
				}
			})
		})

		window.handleCloseOther = function () {
			var deleteData = []
			for (var i = 0; i < $(".layui-tab-title li").length; i++) {
				if ($(".layui-tab-title li")[i].getAttribute("lay-id") != $(".box").attr("name")) {
					deleteData.push($(".layui-tab-title li")[i].getAttribute("lay-id"))
				}
			}
			for (var i = 0; i < deleteData.length; i++) {
				layui.element.tabDelete('xbs_tab', deleteData[i]);
			}
		}
		window.handleRefresh = function () {
			var src = $(".layui-tab-item.layui-show").find("iframe").attr("src");
			$(".layui-tab-item.layui-show").find("iframe").attr("src", src);
			clickiFrame(src)
		}

	});

</script>
<!-- <script type="text/javascript" src="js/xadmin.js" charset="utf-8"></script> -->